<template>
  <div>
    <h1>toRefs</h1>
    <h1>{{ obj.name }}</h1>
    <h1>{{ obj.age }}</h1>
    <h1>{{ name }}</h1>
    <h1>{{ age }}</h1>
    <input type="text" v-model="obj.name" /><br />
    <input type="text" v-model="obj.age" /><br />
    <input type="text" v-model="name" /><br />
    <input type="text" v-model="age" /><br />
    <input type="text" v-model="name1" /><br />
    <input type="text" v-model="age1" />
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({

  setup() {
    const obj = reactive({
      name: "tom",
      age: 10,
    });
    console.log(obj);
    const objToRefs = toRefs(obj);
    console.log(objToRefs);

    const name1 = obj.name;
    const age1 = obj.age;
    return {
      ...objToRefs,
      obj,
      name1,
      age1,
    };
  },
});
</script>

<style scoped>
</style>